<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书评网登录</title>
    <!-- 引入样式-->
    <link href="../imgs/2.jpeg" type="image/x-icon" rel="icon">
    <link rel="stylesheet" href="../js/element-ui/index.css">
    <!-- 引入js-->
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/http.js"></script>
    <script src="../js/element-ui/index.js"></script>
    <style>
        body{
            background-image: url("../imgs/1.jpg");
            background-size: 100%;
        }
        .el-input{
            width: 250px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-link type="info" @click="infoDialogVisible=true">我是帮助!</el-link>
    <div style="margin-top: 150px;margin-left:200px;background: #e1f3d8;width: 350px;border-radius: 5px">
        <el-input style="margin-top:20px;margin-left:12px" v-model="user.username" placeholder="请输入账号或邮箱:"></el-input>
        <el-button style="margin-top:20px;" type="primary" @click="sendEMail" id="b1">{{buttonName}}</el-button>
        <el-input style="margin-left:12px;margin-top:20px;" type="password" v-model="user.password" placeholder="请输入密码或验证码:"></el-input>
        <el-button type="primary" @click="login" style="margin-top: 20px;margin-left:140px;margin-bottom: 20px">登录</el-button>
    </div>

    <el-dialog
            title="帮助提示"
            :visible.sync="infoDialogVisible"
            width="30%">
        <span>1.注册用户请选择邮箱登录</span><br>
        <span>2.登录页面仅支持用户快速登录</span><br>
        <span>3.密码等个人信息请在登陆后个人主页修改</span>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="infoDialogVisible = false">确定</el-button>
  </span>
    </el-dialog>
</div>

<script>
    // http://localhost:8080/pages/login.html
    let vue=new Vue({
        el:"#app",
        data:{
            user:{},
            infoDialogVisible:false,
            buttonName:"发送",
        },
        created(){
            localStorage.removeItem("user");
            this.$message.success("欢迎你来到书评网登录平台!");
        },
        methods:{
            login(){
                if (this.user.username==undefined||this.user.username==""
                    ||this.user.password==undefined||this.user.password==""){
                    this.$message.error("用户名或密码不能为空!");
                    return false;
                }
                http.post("/user/quickLogin",this.user).then(res=>{
                    localStorage.setItem("user",res.data);
                    window.location.href="index.html";
                });
            },
            sendEMail(){
                let b1 = document.getElementById("b1");
                b1.disabled=true;
                let i=60;
                let interval = setInterval(function () {
                    i--;
                    if (i<=0){
                        clearInterval(interval);
                        b1.disabled=false;
                        vue.buttonName="发送";
                        return false;
                    }
                    vue.buttonName=i+"秒";
                },1000);
                http.get("/user/sendEMail?eMail="+this.user.username).then(res=>{
                    this.$message.success(res.message);
                });
            }
        }
    });
</script>
</body>
</html>